<template>
  <div class="p-6">
    <!-- 顶部信息栏 -->
    <div class="h-10 mb-4 flex justify-between mb:hidden">
      <div>
        <img src="../../assets/setting/logo.jpg" class="h-10 w-10" />
      </div>
      <div class="flex items-center">
        <div class="mr-4">
          <span class="text-sm font-bold">版本:</span
          ><span
            class="py-1 px-2 text-xs text-[#9d66fe] font-bold rounded-lg bg-[#ebe6f7]"
            >{{ "1.0.0" }}</span
          >
        </div>
        <div class="mr-4">
          <span class="text-sm font-bold">许可:</span
          ><span
            class="py-1 px-2 text-xs text-[#9d66fe] font-bold rounded-lg bg-[#ebe6f7]"
            >{{ "extend" }}</span
          >
        </div>
        <div class="mr-4">
          <span class="text-sm font-bold">订阅:</span
          ><span
            class="py-1 px-2 text-xs text-[#9d66fe] font-bold rounded-lg bg-[#ebe6f7]"
            >{{ "none" }}</span
          >
        </div>
        <div class="flex py-1.5 px-3 bg-[#e5f2ef]">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="15px"
            height="15px"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="vue-feather text-theme mr-2.5 feather feather-thumbs-up"
          >
            <path
              d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
            ></path></svg
          ><span class="text-sm font-bold text-theme">写反馈</span>
        </div>
      </div>
    </div>
    <!-- 卡片列表 -->
    <div>
      <div class="sm:flex mb-4">
        <!-- 总用户 -->
        <div class="flex flex-col card flex-1 sm:mr-6 mb:mb-4">
          <div class="flex mb-6">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="22px"
              height="22px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-theme mr-3"
            >
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
            <span class="text-md font-bold sm:text-lg">总用户</span>
          </div>
          <div class="mb-6 text-2xl sm:text-3xl">{{ 11 }}</div>
          <div class="flex">
            <span class="mr-2 text-xs font-bold whitespace-nowrap"
              >显示所有用户</span
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              width="16px"
              height="16px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-theme vue-feather feather feather-chevron-right"
            >
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </div>
        </div>
        <!-- 总储存量 -->
        <div class="flex flex-col card flex-1 mb:mb-4">
          <div class="flex mb-6">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="22px"
              height="22px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-theme mr-3"
            >
              <line x1="22" y1="12" x2="2" y2="12"></line>
              <path
                d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
              ></path>
              <line x1="6" y1="16" x2="6.01" y2="16"></line>
              <line x1="10" y1="16" x2="10.01" y2="16"></line>
            </svg>
            <span class="text-md font-bold sm:text-lg">总储存量</span>
          </div>
          <div class="mb-6 text-2xl sm:text-3xl">{{ 14.6 + "MB" }}</div>
          <div class="flex">
            <span class="mr-2 text-xs font-bold whitespace-nowrap"
              >显示所有用户</span
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              width="16px"
              height="16px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="text-theme vue-feather feather feather-chevron-right"
            >
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </div>
        </div>
      </div>
      <!-- 上传 -->
      <div class="card mb-4">
        <div class="flex mb-6">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22px"
            height="22px"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-theme mr-3"
          >
            <line x1="22" y1="12" x2="2" y2="12"></line>
            <path
              d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
            ></path>
            <line x1="6" y1="16" x2="6.01" y2="16"></line>
            <line x1="10" y1="16" x2="10.01" y2="16"></line></svg
          ><span class="text-md font-bold sm:text-lg">上传</span>
        </div>
        <div class="flex flex-col mb-6">
          <div class="text-2xl sm:text-3xl text-text">{{ 15.57 + "MB" }}</div>
          <div class="mb-2 text-sm text-gray-400 bg-bg">在过去45天内</div>
        </div>
        <div
          class="flex items-end h-20 2xl:gap-4 xl:gap-3 lg:gap-2 md:gap-1 sm:gap-1 mb:gap-1"
        >
          <template v-for="n in 45">
            <el-tooltip placement="top">
              <template #content>
                <div>{{ "08.12月.2023" }}</div>
                <div>
                  <span class="inline-block w-2 h-2 rounded-lg bg-theme"></span>
                  <span>{{ "8.5MB" }}</span>
                </div>
              </template>
              <div
                class="w-[100%] sm:rounded-lg bg-theme"
                :style="
                  n > 40
                    ? { height: n + '%' }
                    : { height: '10%', backgroundColor: '#e5f2ef' }
                "
              ></div>
            </el-tooltip>
          </template>
        </div>
      </div>
      <!-- 下载 -->
      <div class="card mb-4">
        <div class="flex mb-6">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22px"
            height="22px"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-theme mr-3"
          >
            <line x1="22" y1="12" x2="2" y2="12"></line>
            <path
              d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
            ></path>
            <line x1="6" y1="16" x2="6.01" y2="16"></line>
            <line x1="10" y1="16" x2="10.01" y2="16"></line></svg
          ><span class="text-md font-bold sm:text-lg">下载</span>
        </div>
        <div class="flex flex-col mb-6">
          <div class="text-2xl sm:text-3xl text-text">{{ 5.13 + "MB" }}</div>
          <div class="mb-2 text-sm text-gray-400">在过去45天内</div>
        </div>
        <div
          class="flex items-end h-20 2xl:gap-4 xl:gap-3 lg:gap-2 md:gap-1 sn:gap-1 mb:gap-1"
        >
          <template v-for="n in 45">
            <el-tooltip placement="top">
              <template #content>
                <div>{{ "08.12月.2023" }}</div>
                <div>
                  <span class="inline-block w-2 h-2 rounded-lg bg-theme"></span>
                  <span>{{ "8.5MB" }}</span>
                </div>
              </template>
              <div
                class="w-[100%] bg-theme sm:rounded-lg"
                :style="
                  n < 30
                    ? { height: n + '%' }
                    : { height: '10%', backgroundColor: '#e5f2ef' }
                "
              ></div>
            </el-tooltip>
          </template>
        </div>
      </div>
      <!-- 最新注册 -->
      <div class="card mb-4">
        <div class="flex mb-6">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22px"
            height="22px"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-theme mr-3"
          >
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg
          ><span class="text-md font-bold sm:text-lg">最新注册</span>
        </div>
        <div>
          <el-table :data="tableData" table-layout="fixed" style="width: 100%">
            <el-table-column label="用户" min-width="280">
              <template #default="scope">
                <div class="flex">
                  <div>
                    <img
                      src="../../assets/setting/logo.jpg"
                      class="w-11 h-11"
                    />
                  </div>
                  <div class="flex-1 ml-3 pr-10 flex-col">
                    <div>{{ scope.row.name }}</div>
                    <div>{{ "123456789@qq.com" }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="角色">
              <template #default="scope">
                <span>{{ scope.row.role }}</span>
              </template>
            </el-table-column>
            <el-table-column label="使用的储存空间">
              <template #default="scope">
                <span>{{ scope.row.usedStorage }}</span>
              </template>
            </el-table-column>
            <el-table-column label="最大储存">
              <template #default="scope">
                <span>{{ scope.row.maxStorage }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建于" min-width="150">
              <template #default="scope">
                <span>{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="行动" min-width="140">
              <!-- <template #default="scope"> -->
              <template>
                <div class="flex">
                  <div
                    class="inline-block p-1 rounded-lg bg-[#f4f5f6] hover:cursor-pointer hover:bg-theme mr-4"
                  >
                    <Edit class="w-5 h-5" />
                  </div>
                  <div
                    class="inline-block p-1 rounded-lg bg-[#f4f5f6] hover:cursor-pointer hover:bg-theme"
                  >
                    <Delete class="w-5 h-5" />
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 最新注册表格
const tableData: any = [
  {
    name: "Tom",
    role: "用户",
    usedStorage: "0%",
    maxStorage: "5GB",
    date: "07. 12月. 2023",
  },
];
</script>

<style lang="scss" scoped>
.card {
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 0.75rem;
}
</style>
